<template>
  <div class="classify">
    <van-search placeholder="请输入搜索关键词" />
    <div class="classify-content">
      <div class="left-nav">
        <van-sidebar v-model="cuurrentIndex">
          <van-sidebar-item
            :title="item.name"
            v-for="item in classifyData.categoryList"
            :key="item.id"
            @click="onChange(item.id)"
          />
        </van-sidebar>
      </div>
      <div class="right-content">
        <img :src="classifyData.currentCategory.picUrl" style="width: 250px" />
        <div class="desc">
          <span>{{ classifyData.currentCategory.desc }}</span>
        </div>
        <div class="current-classify">
          <div
            class="current-content"
            v-for="item in classifyData.currentSubCategory"
            :key="item.id"
            :text="item.name"
          >
            <img :src="item.picUrl" />
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, reactive, ref, watch } from "vue";
import { getClassify, getCurrentClassify } from "../api/index";

let cuurrentIndex = ref(0);
let classifyData = reactive({
  categoryList: [],
  currentCategory: {},
  currentSubCategory: [],
});

onMounted(async () => {
  let { data } = await getClassify();
  classifyData.categoryList = data.categoryList;
  classifyData.currentCategory = data.currentCategory;
  classifyData.currentSubCategory = data.currentSubCategory;
});

const onChange = async (id) => {
  let { data } = await getCurrentClassify(id);
  classifyData.currentCategory = data.currentCategory;
  classifyData.currentSubCategory = data.currentSubCategory;
};
</script>

<style scoped>
div {
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
    Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
    Microsoft Yahei, sans-serif;
  text-align: center;
}
.classify {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 50px;
  background: #fff;
}
.van-search {
  flex-shrink: 0;
}
.classify-content {
  display: flex;
  height: 100%;
  position: relative;
  overflow-y: scroll;
  height: 100vh;
}
.left-nav {
  height: 100%;
}
.van-sidebar {
  float: left;
  width: 100px;
  height: 100%;
  background-color: #fff;
}
.van-sidebar-item {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right-content {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

.desc {
  width: 250px;
  height: 20px;
  font-family: PingFangSC-Light, helvetica, Heiti SC;
  font-size: 13px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.desc > spam {
  line-height: 20px;
}
.current-classify {
  padding: 10px 20px;
  margin-right: -3%;
}
.current-content {
  float: left;
  padding-right: 3%;
  box-sizing: border-box;
  width: 33.333%;
  margin-bottom: 20px;
}
.current-content > img {
  max-width: 100%;
  width: 70px;
  height: 70px;
}
.van-grid-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>